<template>
  <div>
    <a-drawer
      v-model:open="open"
      title="售后信息"
      width="80%"
      placement="right"
      v-if="orderAfterInfo.shopOrderAfterDto"
    >
      <template #extra>
        <a-space wrap>
          <template v-if="orderAfterInfo.shopOrderAfterDto.orderState == 1">
            <a-popconfirm
              title="您是否同意退款?"
              ok-text="是"
              cancel-text="否"
              @confirm="deliverGoodsFunc"
            >
              <a-button>同意</a-button>
            </a-popconfirm>
            <a-button type="primary" danger @click="refuseOrderFunc"
              >拒绝</a-button
            >
          </template>
          <a-popconfirm
            v-if="orderAfterInfo.shopOrderAfterDto.orderState == 4"
            placement="topLeft"
            title="是否确认收货?"
            ok-text="是"
            cancel-text="否"
            @confirm="confirm(orderAfterInfo.shopOrderAfterDto.id)"
          >
            <a-button type="primary" danger>确认收货</a-button>
          </a-popconfirm>
        </a-space>
      </template>
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="售后编号">{{
            orderAfterInfo.shopOrderAfterDto.orderAfterNo
          }}</a-descriptions-item>
          <a-descriptions-item label="申请时间">{{
            orderAfterInfo.shopOrderAfterDto.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="售后方式">{{
            orderAfterInfo.shopOrderAfterDto.refundType == 1
              ? "退货退款"
              : "仅退款"
          }}</a-descriptions-item>
          <a-descriptions-item label="申请用户">{{
            orderAfterInfo.nickname
          }}</a-descriptions-item>
          <a-descriptions-item label="用户电话">{{
            orderAfterInfo.phone
          }}</a-descriptions-item>
          <a-descriptions-item label="收件人">{{
            orderAfterInfo.shopOrderAfterDto.platformContactUserName
          }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{
            orderAfterInfo.shopOrderAfterDto.platformPhone
          }}</a-descriptions-item>
          <a-descriptions-item label="退货地址">{{
            orderAfterInfo.shopOrderAfterDto.platformAddress
          }}</a-descriptions-item>
          <a-descriptions-item label="订单状态">{{
            afterStateEnum.getNameByValue(
              orderAfterInfo.shopOrderAfterDto.orderState
            )
          }}</a-descriptions-item>
        </a-descriptions>

        <a-card>
          <div class="table-item-layout">
            <div class="table-item" style="width: 35%">
              <div class="table-flex">
                <a-image
                  :src="orderAfterInfo.shopOrderAfterDto.coverPic"
                  :preview="{
                    src: orderAfterInfo.shopOrderAfterDto.coverPic,
                  }"
                  :width="120"
                  :height="110"
                />
                <div style="margin-left: 20px">
                  <div>
                    {{ orderAfterInfo.shopOrderAfterDto.goodsName }}
                  </div>
                  <div>
                    商品编号：{{ orderAfterInfo.shopOrderAfterDto.goodsNo }}
                  </div>
                  <div>
                    价 格：{{ orderAfterInfo.shopOrderAfterDto.totalAmount }}
                  </div>
                </div>
              </div>
            </div>
            <div class="table-item">
              <div class="text-click" @click.stop="orderInfoFunc(orderAfterInfo.shopOrderAfterDto.mainOrderId)">
                {{ orderAfterInfo.shopOrderAfterDto.orderNo }}
              </div>
              <a-typography-text type="secondary"
                >关联商品订单编号</a-typography-text
              >
            </div>
            <div class="table-item">
              <div>¥{{ orderAfterInfo.shopOrderAfterDto.returnAmount }}</div>
              <a-typography-text type="secondary">退款金额</a-typography-text>
            </div>
            <div class="table-item">
              <div>
                {{ orderAfterInfo.shopOrderAfterDto.reason }}
              </div>
              <a-typography-text type="secondary">退款原因</a-typography-text>
            </div>
          </div>
        </a-card>

        <!-- <div class="title-layout">
          <div class="title">备注</div>
          <a-button type="primary">保存</a-button>
        </div>
        <a-textarea :rows="6" placeholder="输入备注信息" :maxlength="500" />

        <a-table
          :dataSource="tableData"
          :columns="columns"
          :pagination="false"
        /> -->

        <a-descriptions
          v-if="
            orderAfterInfo.orderProgessDtoList &&
            orderAfterInfo.orderProgessDtoList.length > 0
          "
          title="售后进度"
          :column="{ xxl: 1 }"
        >
          <a-descriptions-item label="">
            <div>
              <div
                class="steps-item"
                v-for="(item, index) in orderAfterInfo.orderProgessDtoList"
                :key="index"
              >
                <div class="left">
                  <div class="round"></div>
                  <div
                    class="line"
                    v-if="index < orderAfterInfo.orderProgessDtoList.length - 1"
                  ></div>
                </div>
                <div>
                  <div class="steps-title">{{ item.title }}</div>
                  <div class="steps-content">
                    <div
                      class="steps-block"
                      v-for="ele in item.content"
                      :key="ele"
                    >
                      <template v-for="(node, nodeKey) in ele">
                        {{ nodeKey }}：
                        <a-typography-text
                          type="danger"
                          v-if="nodeKey == '物流编号'"
                          >{{ node }}</a-typography-text
                        >
                        <span v-else>{{ node }}</span></template
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions
          title="退款信息"
          v-if="orderAfterInfo.orderRefundInfoDto"
          :column="{ xxl: 1 }"
        >
          <a-descriptions-item label="退款状态">{{
            state[orderAfterInfo.orderRefundInfoDto.status - 1]
          }}</a-descriptions-item>
          <a-descriptions-item label="退款单号"
            >{{ orderAfterInfo.orderRefundInfoDto.orderNo }}
            <a-button type="primary" size="small"  style="margin-left: 10px"
              >复制</a-button
            ></a-descriptions-item
          >
          <a-descriptions-item label="退款时间">{{
            orderAfterInfo.orderRefundInfoDto.createdTime
          }}</a-descriptions-item>
          <a-descriptions-item label="退款路径">{{
            orderAfterInfo.orderRefundInfoDto.payType == 1 ? "微信" : "苹果"
          }}</a-descriptions-item>
          <a-descriptions-item label="退款账户"
            >32784239432</a-descriptions-item
          >
          <a-descriptions-item label="退款金额"
            >¥{{
              orderAfterInfo.orderRefundInfoDto.returnAmount
            }}</a-descriptions-item
          >
        </a-descriptions>
      </a-space>
    </a-drawer>

    <!-- 商品详情 -->
    <see ref="seeRef"></see>
    <!-- 拒绝 -->
    <refuseOrder ref="refuseOrderRef" @refreshList="refreshList"></refuseOrder>
    <!-- 订单详情 -->
    <goodsOrderInfo ref="goodsOrderInfoRef"></goodsOrderInfo>
  </div>
</template>

<script setup>
import { ref } from "vue";
import afterStateEnum from "@/enums/afterStateEnum.js";
import { getShopOrderAfterDetail, confirmAccept, reviewShopOrderAfter } from "@/api/order";
import see from "../../goodsManage/goodsManageModule/see.vue";
import refuseOrder from "./refuseOrder.vue";
import goodsOrderInfo from "../goodsOrderModule/goodsOrderInfo.vue";
import { message } from "ant-design-vue";
const orderId = ref(null)
const open = ref(false);
const seeFunc = (id) => {
  orderId.value = id
  getShopOrderAfterDetailFn(orderId.value);
  open.value = true;
};
const orderAfterInfo = ref({});
const getShopOrderAfterDetailFn = async (id) => {
  const data = await getShopOrderAfterDetail({ id: id });
  orderAfterInfo.value = data.data;
};
const emits = defineEmits('refreshBindData')
// 退款拒绝
const refuseOrderRef = ref(null);
const refuseOrderFunc = () => {
  refuseOrderRef.value.open(orderId.value);
};
function refreshList() {
  getShopOrderAfterDetailFn(orderId.value);
  emits('refreshBindData',true)
}
//同意退款
function deliverGoodsFunc () {
  const params = {
    id: orderId.value,
    state: 1
  }
  reviewShopOrderAfter(params).then(res => { 
    message.info("成功");
    getShopOrderAfterDetailFn(orderId.value);
    emits('refreshBindData',true)
  })
}
// 确认收货
const confirm = async (id) => {
  const data = await confirmAccept({ id: id });
  if (data.code == 200) {
    message.info("成功");
    getShopOrderAfterDetailFn(id);
    emits('refreshBindData',true)
  }
};
//查看详情
const seeRef = ref(null);
const seeGoods = () => {
  seeRef.value.seeFunc(1);
};
const state = ref(["未退款", "已退款", "退款中"]);
const columns = ref([
  {
    title: "备注人",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "功能",
    dataIndex: "gn",
    key: "gn",
    align: "center",
  },
  {
    title: "备注时间",
    dataIndex: "time",
    key: "time",
    align: "center",
  },
  {
    title: "备注内容",
    dataIndex: "content",
    key: "content",
    align: "center",
  },
]);

const tableData = ref([
  {
    name: "小猪儿",
    gn: "取消订单",
    time: "2023/6/23 12:23",
    content: "包包有破损",
  },
  {
    name: "小猪儿",
    gn: "取消订单",
    time: "2023/6/23 12:23",
    content: "改变主意了",
  },
]);


// 关联订单详情
const goodsOrderInfoRef = ref(null);
const orderInfoFunc = (id) => {
  goodsOrderInfoRef.value.seeFunc(id);
};

defineExpose({ open, seeFunc });
</script>

<style lang="less">
.table-item-layout {
  display: flex;
  align-items: center;
  padding: 24px 0;
  box-sizing: border-box;
  .table-item:last-child {
    border-right: 0px solid #ffffff;
  }
  .table-item {
    width: 20%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px;
    box-sizing: border-box;
    border-right: 1px solid #e8ecf0;
    color: #2b3453;
    font-size: 14px;
    .table-flex {
      display: flex;
      align-items: center;
    }
  }
}

.title-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
  }
}

.steps-item {
  display: flex;
  align-items: flex-start;
  .left {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .round {
      width: 20px;
      height: 20px;
      background: #262e47;
      border-radius: 50%;
    }

    .line {
      width: 2px;
      height: 53px;
      background: #262e47;
    }
  }

  .steps-title {
    color: #2b3453;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .steps-content {
    display: flex;
    align-items: center;
    color: #2b3453;
    font-size: 12px;
    .steps-block {
      margin-right: 55px;

      text {
        color: #1990ff;
        cursor: pointer;
      }
    }
  }
}

.text-click {
  color: #1990ff;
  font-size: 14px;
  cursor: pointer;
}
</style>
